<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/normal.css">
    <style>
        .head {
            display: flex;
            overflow: hidden;
            margin-bottom: 30px;
        }
        .content div{
            flex: 1;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
        .name{
            border-right: 5px dashed #d7d7d7;
        }
        
        input{
            width: 400px;
            height: 40px;
            font-size: 20px;
        }
        select{
            width: 400px;
            height: 40px;
            font-size: 20px;
        }
        button{
            width: 90px;
            height: 40px;
            font-size: 22px;
            color: white;
            border: 1px solid #d7d7d7;
            border-radius: 10px;
        }
        .search{
            
            background-color: #48cdd7;
        }
        .content table tr td{
            width: 200px;
            height: 50px;
            font-size: 22px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #d7d7d7;
        }
        .borrow{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 整体-->
    <div class="book-system">
        <!-- 侧边栏 -->
        <div class="left">
            <header>
                <h1>图书管理系统</h1>
            </header>
            <ul class="nav">
                <li>
                    <a href="" class="center">管理中心</a>
                    <ul class="item">
                        <li>
                            <a href=" " class="system">图书信息</a>
                            <ul>
                            <li><a href="./showbook.html">浏览图书</a></li>
                            <li class="active"><a href="./searchbook.html" class="active">查询图书</a></li>
                            <li><a href="./rankingbook.html">图书排行榜</a></li>
                            </ul>
                        </li>
    
                    </ul>
                    <ul class="item">
                        <li>
                            <a href="" class="system">个人信息</a>
                            <ul>
                                <li><a href="../user-info/borrowbook.html">借书情况</a></li>
                                <li><a href="../user-info/setuser.html">账号设置</a></li>
                            </ul>
                        </li>
    
                    </ul>
                    
                </li>
    
            </ul>
        </div>
        <!-- 右边介绍 -->
        <div class="right">
            <!-- 上边栏 头像和介绍 -->
            <footer>
                <div class="welcome">
                    <h1>识万卷之书，得万里之路</h1>
                
                </div>
                <span>北京时间：2023/10/26 周四 17:17:17</span>
                <div class="img">
                    <img src="../images/user.png" alt="">
                    <span>usersys</span>
                </div>
    
            </footer>
            <!-- 内容 -->
            <div class="content">
                <div class="head">
                    <!-- 按名字查找 -->
                    <div class="name">
                
                        <input type="text" placeholder="请输入查找的书名">
                        <button class="search">搜索</button>
                    </div>
                    <!-- 按类别查找 -->
                    <div class="type">
                        <select>
                            <option value="">请选择查找的类型</option>
                            <option value="">计算机</option>
                            <option value="">文学</option>
                        </select>
                        <button class="search">搜索</button>
                
                    </div>
                </div>
                <table align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>书名</td>
                        <td>书号</td>
                        <td>类别</td>
                        <td>作者</td>
                        <td>出版社</td>
                        <td>库存量</td>
                        <td>定价</td>
                        <td>操作</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><button class="borrow">借阅</button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>